<template>
 <hr>1
  <component :is="my-vue-element">2</component>3

  <my-vue-element>2</my-vue-element>3 <br>
  <test2>test</test2>4 <br>
  <test3>test</test3>4 <br>
  <test4>test</test4>4 <br>
  {{aa}}
</template>


<script>
  import {ref, reactive, onMounted, nextTick, defineCustomElement, defineAsyncComponent} from 'vue'
    
  const MyVueElement = defineCustomElement({
    // normal Vue component options here
    props: {},
    emits: {},
    template: `这是模板`,

    // defineCustomElement only: CSS to be injected into shadow root
    styles: [`/* inlined css */`]
  })

  // Register the custom element.
  // After registration, all `<my-vue-element>` tags
  // on the page will be upgraded.
  customElements.define('my-vue-element', MyVueElement)

  // You can also programmatically instantiate the element:
  // (can only be done after registration)
  document.body.appendChild(
    new MyVueElement({
      // initial props (optional)
    })
  )
  
  const mydom3 = defineAsyncComponent(() => 
    import('./c-04a.vue')
  )
  
  const AsyncComp = defineAsyncComponent(
    () =>
      new Promise((resolve, reject) => {
        resolve({
          template: '<div>I am async!</div>'
        })
      })
  )

  const mydom2 = defineAsyncComponent(() => {
    return new Promise((resolve, reject) => {
      resolve({
        // 这里是普通的 Vue 组件选项
        props: {},
        emits: {},
        template: `动态组件222{{aa}}`,
        setup(props) {
          const aa = ref('ewerwer')
          // alert(aa.value)
          return {
            aa
          }
        },
        // 只用于 defineCustomElement：注入到 shadow root 中的 CSS
        styles: ['button { font-size: 24px; }']
      })
    })
  })


  export default {
    name: 'template11',
    components: {
      test2: mydom3,
      test3: defineAsyncComponent(() =>
        import('./c-04a.vue')
      ),
      test4: AsyncComp
    },
    setup(props) {
          

      return {
        
      }
    }
  }
</script>